<template>
    <van-nav-bar
        title="商品详情"
        left-text="返回"
        left-arrow
        @click-left="back"
        @click-right="show = !show"
    >
    <template #right>
        <van-icon name="share-o" size="18" @click="ShareShow = true" />
    </template>
    </van-nav-bar>

    <van-swipe class="my-swipe" :autoplay="3000"    indicator-color="white">
      <van-swipe-item v-for="pic in product.thumbs_text">
        <van-image
            width="100%"
            height="100%"
            fit="fill"
            :src="pic"
          />
      </van-swipe-item>
    </van-swipe>

    <!-- 商品信息 -->
    <div class="detailbox">
        <h4>{{product.name}} - ({{product.type ? product.type.name : ''}})</h4>
        <div class="price"><em>￥</em>{{product.price}}
        <b>库存：{{product.stock}} {{product.unit ? product.unit.name : ''}}</b>
        </div>
    </div>

    <div class="allkbox"></div>

    <!-- 评论 -->
    <div class="title">用户评论</div>
    <div class="titlefg"></div>
    <div class="comment" v-if="comment" v-for="item in comment">
        <div class="commentlist">
            <div>
                <van-image
                    round
                    width="3rem"
                    height="3rem"
                    :src="item.business.avatar_text"
                />
            </div>
            <div class="content">
                <van-text-ellipsis :content="item.comment" expand-text="展开" collapse-text="收起" class="text" />
                <div class="time">{{ item.createtime_text }}</div>
            </div>
        </div>
    

    </div>
    <div class="nocomment" v-else>
        暂无评论
    </div>
    <div class="fg"></div>

    <!-- 商品参数 -->
    <div class="detailbox_2">
        <p class="tit">产品参数：</p>
        <div class="titlefg"></div>
    <div v-html="product.content" class="procontent"></div>
    </div>


    <van-share-sheet
        v-model:show="ShareShow"
        title="立即分享给好友"
        :options="options"
        @select="share"
    />

    <!-- 返回顶部 -->
    <van-back-top right="20" bottom="60" />

    <!-- 动作栏 -->
    <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" dot @click="contact"/>
        <van-action-bar-icon icon="cart-o" text="购物车"  @click="ToCart" :badge="count" v-if="count > 0" />
        <van-action-bar-icon icon="cart-o" text="购物车"  @click="ToCart" v-else />
        <van-action-bar-button type="warning" text="加入购物车" @click="AddCart" />
        <van-action-bar-button type="danger" text="立即购买" @click="BuyNow" />
    </van-action-bar>


</template>
<script setup>
import {getCurrentInstance} from 'vue'
    const {proxy} = getCurrentInstance()

    //获取cookie 创建响应式
    var business = reactive(proxy.$cookies.get('business'))

    let proid = proxy.$route.query.hasOwnProperty('proid') ? proxy.$route.query.proid : 0
    proid = ref(proid)
    let product = ref({})
    let comment = ref({})
    let count = ref(0)
    let ShareShow = ref(false)
    const options = [
      [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
      ],
      [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
      ],
    ];

    onBeforeMount(() => {
        request()
        ProductCount()
        commentData()
    })

    const back = () => {
        proxy.$router.go(-1)
        return false
    }

    const share = (options) => {
        ShareShow.value = false
        console.log(options);
    }

    const request = async () => {
        var result = await proxy.$POST({
            url: '/index/product',
            params: {proid: proid.value}
        })

        if(result.code == 0){
            proxy.$fail(result.msg)
            return false
        } 

        product.value = result.data
    }

    let commentData = async () => {
        var data = {
            busid: business.id,
            proid: proid.value
        }

        var result = await proxy.$POST({
            url: '/index/comment',
            params: data
        })
        if(result.code == 0){
            proxy.$fail('页面评论加载失败');
            return false
        }else{
            comment.value = result.data
            // console.log(comment.value);
        }
    }


    const contact = async () => {
        proxy.$confirm({
            title:'电话提醒',
            message:'是否拨打客服热线'
        }).then(() => {
            location.href = `tel:15841487167`
        }).catch(() => {})
    }

    const ToCart = () => {
        proxy.$router.push('/cart/index')
        return false
    }


    // 购物车数量
    const ProductCount = async () => {
        // 用户已登录的状态去请求
        if(Object.getOwnPropertyNames(business).length <= 0){
            return;
        }

        var result = await proxy.$POST({
            url: '/index/count',
            params: {busid: business.id}
        })

        if(result.code == 0){
            proxy.$fail(result.msg)
            return false
        }

        count.value = result.data
    }


    // 加入购物车
    const AddCart = async () => {
        if(Object.getOwnPropertyNames(business).length <= 0){
            proxy.$fail('请先登录')
            return false
        }

        // 组装数据
        var data = {
            busid: business.id,
            proid: proid.value
        }
        
        // 发请求
        var result = await proxy.$POST({
            url: '/cart/add',
            params: data
        })

        if(result.code == 0){
            proxy.$fail(result.msg)
            return false
        }

        // 更新购物车的数量
        ProductCount()

        proxy.$confirm({
            title: result.msg,
            message: '是否跳转到购物车结算'
        }).then(() => {
            proxy.$router.push('/cart/index')
        }).catch(err => {})

    }

    // 立即购买
    let BuyNow = async () => {
        if(Object.getOwnPropertyNames(business).length <= 0){
            proxy.$fail('请先登录')
            return false
        }
        proxy.$confirm({
            title: '下单提醒',
            message: '是否确认立即下单'
        }).then(async () => {
            proxy.$router.push({
                path: '/cart/buynow',
                query: {proid: proid.value}
            })
        }).catch(err => {})
    }

</script>

<style>
    .comment{
        display: flex;
        font-size: 14px;
        width: 100%;
        margin: 1em;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .nocomment{
        display: flex;
        font-size: 14px;
        width: 100%;
        align-items: center;
        margin: 1em;
    }

    .commentlist {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

    .content{
        margin-left: 1em;
        display: flex;
        width: 100%;
        align-items: center;
    }
    .text{
        width: 59%;
    }

    .time{
        font-size: 12px;
        color: #ccc;
    }

    .title{
        font-size: 14px;
        margin: 1em;
    }

    .fg{
        width: 100%;
        height: 1px;
        background: #ccc;
    }
    .titlefg{
        width: 30%;
        height: 2px;
        background-color: darkorange;
    }

    .detailbox_2 .tit{
        font-size: 14px;
        padding: 0;
        margin: 1em;
    }

    .procontent{
        font-size: 14px;
        margin: 1em;
    }
</style>